import { useRef, useEffect, useState } from 'react'
import './index.scss'
import useECharts from '@/utils/useECharts'
import { getMovieCountApi } from '@/api'

function MovieCount() {
  const countRef = useRef(null)
  const [yearList, setYearList] = useState([])
  const [countList, setCountList] = useState([])

  useEffect(() => {
    const getMovieCount = async () => {
      const res = await getMovieCountApi()
      const yearList = Object.keys(res.data)
      setYearList(yearList)
      const countList = Object.values(res.data)
      setCountList(countList)
    }
    getMovieCount()
  }, [])

  const option = {
    tooltip: {
      trigger: 'item'
    },
    visualMap: {
      orient: 'horizontal',
      left: 'center',
      min: 0,
      max: 15,
      text: ['15', '0'],
      inRange: {
        color: ['#65B581', '#FFCE34', '#FD665F']
      }
    },
    xAxis: [
      {
        type: 'category',
        axisTick: { show: false },
        data: yearList
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '上映数量',
        type: 'bar',
        label: {
          show: true,
          position: 'inside',
          distance: 15
        },
        emphasis: {
          focus: 'series'
        },
        data: countList
      }
    ]
  }

  useECharts(countRef, option)

  return (
    <>
      <div className="movie-count">
        <h1>各年份上映电影数量</h1>
        <div id="count" ref={countRef}></div>
      </div>
    </>
  )
}

export default MovieCount
